<template>
	<view>
		<view v-if="imgList.length == 1" class="box1">
			<!-- 			<image></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="widthFix" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 2" class="box4 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 3" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 4" class="box4 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 5" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 6" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 7" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 8" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
		<view v-if="imgList.length == 9" class="box5 flex flex-wrap">
			<!-- <image v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></image> -->
			<load-img v-for="(i, j) in imgList" :key="j" class="img mt20 radius10" mode="aspectFill" :src="i" @click.native="onPreView(i,j)"></load-img>
		</view>
	</view>
</template>

<script>
	import loadImg from '../../../components/loadImg/index.vue';
	export default {
		components: {
			loadImg
		},
		name: '',
		props: {
			imgArrayList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			imgJsonList: {
				type: [Object, Array],
				default: function() {
					return [{}];
				}
			}
		},
		data() {
			return {
				imgList: []
			};
		},
		watch: {

			// 多个组件传数据 缓存就是麻烦啊
			imgJsonList() {
				this.imgList = [];
				let arr = JSON.parse(JSON.stringify(this.imgJsonList));
				for (let i = 0, item;
					(item = arr[i]); i++) {
					this.imgList.push(item.download_url);
				}
			}
		},
		created() {
			this.imgList = [];
			let arr = JSON.parse(JSON.stringify(this.imgJsonList));
			for (let i = 0, item;
				(item = arr[i]); i++) {
				this.imgList.push(item.download_url);
			}
			// console.log(this.imgList);
		},
		methods: {
			onPreView(item, index) {
				uni.previewImage({
					urls: this.imgList,
					current: item
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/*@padding  外围20px 
			图片外边距10rpx +10rpx = 10px
			图片大小=375-20-10-5=340px   340/3*2=227rpx  (3张一列)
			图片大小=375-20-10=345px   345/2*2=345rpx  (2张一列)
 */


	/*
	改动   外围20px + 左边距40px +  头像右边距10px、
	图片外边距10rpx +10rpx = 10px
	
	图片大小=375-20-40-10-10-5=290px   290/2*2=290rpx  (2张一列)
	图片大小=375-20-40-10-10=295px   295/3*2=197rpx  (3张一列)
*/
	.box1 {
		padding-left: 88rpx;

		/deep/ .img {
			width: 300rpx;
			margin: 0 0 10rpx 0;

			/deep/ image {
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
	}

	.box4 {
		padding-left: 80rpx;

		/deep/ .img {
			height: 290rpx !important;
			width: 290rpx !important;
			margin: 0 0 10rpx 0;

			/deep/ image {
				border-radius: 20rpx;
				overflow: hidden;
			}
		}

		/deep/ .img:nth-child(2n + 0) {
			margin: 0 10rpx 10rpx 10rpx;
		}
	}

	.box5 {
		padding-left: 80rpx;

		/deep/ .img {
			height: 197rpx !important;
			width: 197rpx !important;
			margin: 0 0 10rpx 0;
			border-radius: 20rpx;

			/deep/ image {
				border-radius: 20rpx;
				overflow: hidden;
			}
		}

		.img:nth-child(2),
		.img:nth-child(5),
		.img:nth-child(8) {
			margin: 0 10rpx 10rpx 10rpx;
		}
	}
</style>
